<template>
<div class="base-info">
	<div class="item" v-for="(value, key) in dataEnum" :key="key">
		<p>{{ value }}：</p>
		<p>{{ houseData[key] ?? '-' }}</p>
	</div>
</div>
</template>

<script setup>
import { ref, defineProps } from 'vue'

defineProps({
	houseData: {
		type: Object,
		default: () => {}
	}
})

const dataEnum = ref({
	'fwbh': '房屋编号',
	'hzxm': '户主姓名',
	'address': '房屋地址',
	'region': '行政区划',
})
</script>

<style scoped lang="less">
.base-info {
	padding: 32px 0;
	margin: 0 32px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 16px 0 rgba(0, 0, 0, .14);
	border-radius: 8px;
	background: #fff;
	.item {
		display: flex;
		margin: 0 32px;
		&:nth-last-of-type(1) {
			border: 0;
		}
		p {
			line-height: 44px;
			&:nth-of-type(1) {
				color: var(--content-color);
			}
			&:nth-of-type(2) {
				width: 0;
				flex: 1;
				color: var(--title-color);
			}
		}
	}
}
</style>
